<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<!-- 引入Bootstrap核心样式文件 -->
		<link th:href="@{/asserts/bootstrap-3.4.1/css/bootstrap.min.css}" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script th:src="@{/asserts/javascript/jQuery-1.12.4.js}"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script th:src="@{/asserts/bootstrap-3.4.1/js/bootstrap.min.js}"></script>

		<link th:href="@{/asserts/css/login-new.css}" rel="stylesheet" />

		<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
		<link th:href="@{/asserts/css/common.css}" rel="stylesheet" />

		<!-- 引入验证插件css -->
		<link rel="stylesheet" th:href="@{/asserts/validator/css/bootstrapValidator.css}" />
		<!-- 引入验证插件js -->
		<script th:src="@{/asserts/validator/js/bootstrapValidator.js}"></script>

		<title>蜗牛书城-欢迎登陆</title>
	</head>
	<style>
		.form-control {
			border-radius: 0;
		}
	</style>

	<body>
		<!-- header -->
		<div class="w">
			<div class="header">
				<div class="logo">
					<img src="http://localhost:10001/title-logo.png">
					<span>欢迎登录</span>
				</div>
			</div>
		</div>


		<!-- content -->
		<div class="warning-wrap">
			<div class="warning">
				<p><i class="iconfont">&#xe6cd;</i>
					依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
					<a href="#">《蜗牛隐私政策》</a>已上线，将更有利于保护您的个人隐私。
				</p>
			</div>
		</div>

		<div class="login-wrap">
			<div class="w">
				<div class="content">
					<div class="login-form fr">
						<div class="login-box h50">
							<div class="login-way login fl active" onclick="changeForm(1)">账户登录</div>
							<div class="login-way regist fr" onclick="changeForm(2)">注册账号</div>
						</div>

						<!-- ===================== 登录的表单 ========================-->
						<form  onsubmit="return false" method="post" id="login" class="show-form form-horizontal">
							<div class="pl20 pr20">

								<div class="h50"></div>

								<div class="form-group">
									<label class="col-lg-3 control-label">
										<i class="iconfont">&#xe604;</i>
									</label>
									<div class="col-lg-9">
										<input type="text" class="form-control itxt" name="username" placeholder="用户账号:"
											autocomplete="off" />
									</div>
								</div>

								<div class="form-group">
									<label class="col-lg-3 control-label">
										<i class="iconfont">&#xe625;</i>
									</label>
									<div class="col-lg-9">
										<input type="text" class="form-control itxt" name="password" placeholder="用户密码:"
											autocomplete="off" />
									</div>
								</div>


								<div class="wp">
									<div class="h50 right-link">
										<div class="fr fs10 pt15 "><a href="#">忘记密码</a></div>
									</div>
								</div>

								<div class="wp mt60">
									<div class="h50 center">
										<div class="login-btn"><button type="submit">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
										</div>
									</div>
								</div>
							</div>
						</form>

						<!-- =========================== 注册的表单 ======================== -->
						<form id="regist" class="form form-horizontal" action='login'>
							<div class="pl20 pr20">
								<div class="h34"></div>

								<div class="form-group">
									<label class="col-lg-3 control-label">
										<i class="iconfont">&#xe604;</i>
									</label>
									<div class="col-lg-9">
										<input type="text" id="email" class="form-control itxt" name="email"
											placeholder="新账号:" autocomplete="off" />
										<button type="button" class="btn btn-primary" onclick="sendCode()">发送验证码</button>

										<span id="codeSpan" style="width: 40px;height: 40px;text-align: center;color: red"></span>

									</div>
								</div>

								<div class="form-group">
									<label class="col-lg-3 control-label">
										<i class="iconfont">&#xe625;</i>
									</label>
									<div class="col-lg-9">
										<input type="text" class="form-control itxt" name="password"
											placeholder="密码:" autocomplete="off" />
									</div>
								</div>

								<div class="form-group">
									<label class="col-lg-3 control-label">
										<i class="iconfont">&#xe625;</i>
									</label>
									<div class="col-lg-9">
										<input type="text" class="form-control itxt" name="d_password"
											placeholder="重输密码:" autocomplete="off" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-3 control-label">
										<i class="iconfont">&#xe625;</i>
									</label>
									<div class="col-lg-9">
										<input type="text" class="form-control itxt" name="emailCode"
											   placeholder="输入验证码:" autocomplete="off" />
									</div>
								</div>

								<div class="wp mt30">
									<div class="h50 center">
										<div class="login-btn"><button type="submit">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!-- footer -->

		<div class="footer ">
			<div class="pt15 fs10 center">
				<a href="#">关于我们</a> <span>|</span>
				<a href="#">联系我们</a> <span>|</span>
				<a href="#">人才招聘</a> <span>|</span>
				<a href="#">商家入驻</a> <span>|</span>
				<a href="#">广告服务</a> <span>|</span>
				<a href="#">手机蜗牛</a> <span>|</span>
				<a href="#">友情链接</a> <span>|</span>
				<a href="#">销售联盟</a> <span>|</span>
				<a href="#">蜗牛社区</a> <span>|</span>
				<a href="#">English Site</a>
			</div>
			<div class="pt10 fs10 center">
				<span>Copyright © 2004-2021</span>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span>模拟京东商城登录界面</span>
			</div>

		</div>
	</body>
	<script th:inline="javascript">

		//获取到 request作用域中的 flag的值
		var flag = /*[[${flag}]]*/ ;
		//alert(flag)
		if(flag == 2) {
			changeForm(2);
		}
		// 切换登录和注册表单
		function changeForm(op) {
			if (op == 1) {
				// 改变登录按钮样式
				$(".login").addClass("active");
				$(".regist").removeClass("active");
				// 显示登录表单
				$("#login").addClass("show-form");
				$("#regist").removeClass("show-form");

			} else if (op == 2) {
				$(".regist").addClass("active");
				$(".login").removeClass("active");
				$("#regist").addClass("show-form");
				$("#login").removeClass("show-form");
			}
		}

		$('#login').bootstrapValidator({
			message: 'This value is not valid',
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				// invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
				username: {
					// 提示信息
					message: '用户名无效',
					// 验证规则
					validators: {
						notEmpty: {
							message: '用户名必须填写，不能为空'
						}/*,
						stringLength: {
							min: 4,
							max: 16,
							message: '用户名是4到16位的字符'
						},
						remote: { // 注意，这里不用拼接字符串.直接把要验证的字符放后面就行。
							url: 'http://localhost:8080/music/validation' + $("input[name=username]").val(),
							message: '名字已经被使用',
							delay: 500,
							type: 'get'
						},
						// 自定义正则
						regexp: {
							//regexp: /^[\u4e00-\u9fa5]+$/,
							regexp: /^[a-z|0-9|A-Z]+$/,
							// message: '用户名必须是中文',
							message: '用户名是英文和数字组合'
						}*/
					}
				},
				password: {
					validators: {
						/*stringLength: {
							min: 6,
							max: 16,
							message: '密码应该是6-16位的字符'
						},*/
						notEmpty: {
							message: '密码不能为空!'
						}
					}
				}
				
			}
			// 验证成功后的提交
		}).on('success.form.bv', function(e) {
			// Prevent form submission
			e.preventDefault();
			// 得到表单实例
			var $form = $(e.target);
			// 得到BootstrapValidation 验证实例
			//var bv = $form.data('bootstrapValidator');
			// 使用ajax提交表单
			let params =  $form.serialize() ;
			//alert(params);  //username=wucong&password=123456
			let baseUrl = /*[[@{/}]]*/ ;
			let url = baseUrl + 'user/login' ; // http://localhost:9999/user/login
			//发送的是 ajax 请求
			$.post(url,params, function(result) {
				console.log(result);
				// 获得提交后的json内容
				//alert(5555);
				if (result == '0') {
					alert("用户名或者密码错误!");
				}else if (result == '1') {
					let baseUrl = /*[[@{/}]]*/ ;
					alert("登录成功!");
					location.href = baseUrl+"book/index" ;
				}
			}, 'text');
		});

		let span = $("#codeSpan");
		let count = 120 ;
		let a ;
		function sendCode(){
			let email = $("#email").val();
			if (email == null || email == ''){
				alert("邮箱不能为空!");
				return ;
			}
			let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/ ;
			if (!reg.test(email)) {
				alert("必须符合邮箱规则!");
				return ;
			}
			//发送请求
			let url = "../user/sendEmailCode" ;
			let params = "email="+email ;
			$.post(url,params,function (res){
				if (res == '0') {
					alert("邮箱已经被注册过！");
				}else if (res == '1'){
					alert("发送成功!");
					//开启定时器
					a = window.setInterval("test()",1000);
				}else {
					alert("发送失败!");
				}
			});
		}
		function test(){
			//alert(3333);
			span.html(count) ;
			count--;
			if (count == -1){
				//停止定时器
				window.clearInterval(a);
				count = 120 ;
			}
		}
		// 这是注册的验证规则
		$('#regist').bootstrapValidator({
			message: 'This value is not valid',
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				// invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
				email: {
					// 提示信息
					message: '用户名无效',
					// 验证规则
					validators: {
						notEmpty: {
							message: '账户不能为空'
						},
						/*stringLength: {
							min: 4,
							max: 16,
							message: '用户名是4到16位的字符'
						},*/
						/*remote: { // 注意，这里不用拼接字符串.直接把要验证的字符放后面就行。
							url: 'http://localhost:9999/user/validationEmail' + $("input[name=email]").val(),
							message: '邮箱已经被使用',
							delay: 500,
							type: 'get'
						},*/
						// 自定义正则
						regexp: {
							//regexp: /^[\u4e00-\u9fa5]+$/,
							//regexp: /^[a-z|0-9|A-Z]+$/,
							// message: '用户名必须是中文', ^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$
							regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
							message: '必须符合邮箱规则'
						}
					}
				},
				password: {
					validators: {
						stringLength: {
							min: 6,
							max: 16,
							message: '密码应该是6-16位的字符'
						},
						notEmpty: {
							message: '密码不能为空'
						}
					}
				},
				d_password: {
				    validators: {
				        notEmpty: {
				            message: '密码不能为空'
				        },
				        identical: {
				            field: 'password',
				            message: '两次密码不一致'
				        }
				    }
				},
				emailCode: {
					validators: {
						notEmpty: {
							message: '验证码不能为空'
						}
					}
				}
			}
			// 验证成功后的提交
		}).on('success.form.bv', function(e) {
			// Prevent form submission
			e.preventDefault();
			// 得到表单实例
			var $form = $(e.target);
			// 得到BootstrapValidation 验证实例
			//var bv = $form.data('bootstrapValidator');
			// 使用ajax提交表单
			let url = "../user/reg"  // http://localhost:9999/user/reg
			$.post(url, $form.serialize(), function(result) {
				//alert(result);
				console.log(result);
				// 获得提交后的json内容
				if (result == '1') {
					alert("注册成功!");
					location.href = "../login.html";
				}if (result == '0') {
					alert("验证码错误!");
				}else {
					alert("注册失败");
				}
			});
		});
	</script>
</html>
